﻿import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import './history.css';
import * as actions from './actions'
import SentCategory from './SentCategory';
import ReceiptCategory from './ReceiptCategory'

class History extends Component {
    static propTypes = {
        sent: PropTypes.object,
        receipt: PropTypes.object,
        goSentNext: PropTypes.func.isRequired,
        goSentPre: PropTypes.func.isRequired,
        goReceNext: PropTypes.func.isRequired,
        goRecePre: PropTypes.func.isRequired,
        selectRow: PropTypes.func.isRequired
    }
    render() {
        return (
            <div className='history'>
                <SentCategory
                    category={this.props.sent}
                    move2pre={this.props.goSentPre}
                    move2next={this.props.goSentNext}
                    selectRow={this.props.selectRow}
                />
                <ReceiptCategory
                    category={this.props.receipt}
                    move2next={this.props.goReceNext}
                    move2pre={this.props.goRecePre}
                    selectRow={this.props.selectRow}
                />
            </div>
        )
    }
}
const mapState2props = state => {
    var { sent, receipt } = state.history || {};
    return { sent, receipt }
}
const mapDispatch2props = dispatch => ({
    goSentNext: () => dispatch(actions.nextSentPage()),
    goSentPre: () => dispatch(actions.preSentPage()),
    goReceNext: () => dispatch(actions.nextRecePage()),
    goRecePre: () => dispatch(actions.preRecePage()),
    selectRow: (categoryName, row) => dispatch(actions.selectRow(categoryName, row))
})
export default connect(mapState2props, mapDispatch2props)(History);